<template>
  <div>
    <el-card class="box-card">
      <el-col :span="12">
        <div class="imgbg">
<!--          <img src="../assets/loginImage/login-bg.png" alt="" />-->
          <img src="../assets/loginImage/login-bg.png" alt="" />
          <div class="title">拼团商城后台管理系统</div>
        </div>
      </el-col>

      <el-col :span="12">
        <div class="loginFrm">
          <h1>欢迎登录</h1>
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="用户名" prop="user">
              <el-input
                palceholder="用户名"
                type="text"
                v-model="ruleForm.user"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
              <el-input
                palceholder="密码"
                type="password"
                v-model="ruleForm.pass"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="sidentify">
              <el-col :span="14"
                ><el-input
                  v-model="ruleForm.sidentify"
                  palceholder="验证码"
                ></el-input
              ></el-col>
              <el-col :span="8" class="code">{{ identifyCode }}</el-col>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="login">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-card>
  </div>
</template>

<script>
import jwtDecode from "jwt-decode";
import ActionType from "../store/ActionType";
import dynamicRouter from '../router/dynamicRouter'
import router from "@/router";
import EditRole from "@/components/set/EditRole";
export default {
  name: "login",
  data() {
    return {
      ruleForm: {
        user: "",
        pass: "",
        sidentify: "",
      },
      rules: {
        user: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        pass: [{ required: true, message: "请输入密码", trigger: "blur" }],
        sidentify: [{ required: true }],
      },
      identifyCode: "",
    };
  },
  created() {
    this.createIdentify();
  },
  methods: {
    createIdentify() {
      let code = "";
      const codeLength = 4; //验证码的长度
      const random = new Array(0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F","G","H","I","J","K","L",
        "M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"
      ); //随机数
      for (let i = 0; i < codeLength; i++) {
        //循环操作
        let index = Math.floor(Math.random() * 36); //取得随机数的索引（0~35）
        code += random[index]; //根据索引取得随机数加到code上
      }
      this.identifyCode = code; //把code值赋给验证码
    },
    login() {
      if (this.ruleForm.sidentify.toUpperCase() != this.identifyCode) {
        this.$message({
          message: "验证码错误",
          type: "warning",
        });
        this.createIdentify();
      } else {
        //登录
        if (
          this.ruleForm.user.length > 0 &&
          this.ruleForm.pass.length > 0 &&
          this.ruleForm.sidentify.length > 0
        ) {
          //发送请求
          this.$axios.post("/api/login/do?adminName="+this.ruleForm.user+"&adminPassword="+this.ruleForm.pass).then((res) => {
              console.log(res);
              if (res.data.code === 200) {
                //改变状态
                this.$store.dispatch(ActionType.setToken,res.data.data)
                const decode = jwtDecode(res.data.data);
                console.log(JSON.parse(decode.data));
                this.$store.dispatch("loginSuccessAction",JSON.parse(decode.data))
                console.log(sessionStorage.getItem("isLogin"))
                //动态加载路由
                dynamicRouter.dynamicRouter()


                  console.log('index下的路由：')
                  console.log(router.options.routes[2].children)



                // debugger
                //跳转页面
                this.$router.push("/index");
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "warning",
                });
              }
            });
        } else {
          this.$message({
            message: "请输入",
            type: "warning",
          });
        }
      }
    },
  },
};
</script>

<style scoped>
.imgbg {
  height: 557px;
  width: 431px;
  position: relative;
}
.title {
  color: white;
  font-size: 24px;
  height: 32px;
  width: 240px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.box-card {
  width: 862px;
  height: 557px;
  margin: 80px auto;
  border-radius: 20px 0 0 20px;
}
div /deep/ .el-card__body {
  padding: 0;
}
.loginFrm form {
  padding-right: 30px;
}
.loginFrm h1 {
  font-size: 24px;
  padding-top: 120px;
  padding-bottom: 50px;
}
button {
  width: 160px;
}
</style>